<template>
  <!-- <Charts :option="option"></Charts> -->
  <div>aa</div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
// import Charts from '@/components/Charts.vue'
// 指定图表的配置项和数据
// const option = reactive({
//   title: {
//     text: 'ECharts 入门示例'
//   },
//   tooltip: {},
//   legend: {
//     data: ['销量']
//   },
//   xAxis: {
//     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
//   },
//   yAxis: {},
//   series: [
//     {
//       name: '销量',
//       type: 'bar',
//       data: [5, 20, 36, 10, 10, 20]
//     }
//   ]
// })

var years = [2017, 2018];
var myData = ['本区', '本市', '省内', '省外'];
var dataMan = {
  2017: [4500, 5000, 4800, 5500],
  2018: [5000, 5800, 5500, 6000],
};
var dataWomen = {
  2017: [3500, 4200, 4000, 5200],
  2018: [4000, 5000, 4500, 5800],
};
/* option 开始 */
const option = reactive({
  /* baseOption 开始 */
  baseOption: { // baseOption 是一个 『原子option』，options 数组中的每一项也是一个 『原子option』。每个『原子option』中就是ECharts文档中描述的各种配置项。
    // timeline 组件，提供了在多个 ECharts option 间进行切换、播放等操作的功能。
    // timeline 和其他组件有些不同，它需要操作『多个option』。 假设，我们把 ECharts 的传统的 option 称为原子option，
    // 那么使用 timeline 时，传入 ECharts 的 option 就成为了一个集合多个原子option的复合option。
    timeline: {
      show: true, // 是否显示 timeline 组件。如果设置为false，不会显示，但是功能还存在。[ default: true ]
      type: 'slider', // 这个属性目前只支持为 slider，不需要更改。[ default: 'slider' ]
      axisType: 'category', // 轴的类型。[ default: 'time' ], 可选值为：'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据。'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
      currentIndex: 0, // 表示当前选中项是哪项, [ default: 0 ]。比如，currentIndex 为 0 时，表示当前选中项为 timeline.data[0]（即使用 options[0]）。
      autoPlay: true, // 表示是否自动播放。[ default: false ]
      rewind: false, // 表示是否反向播放。[ default: false ]
      loop: true, // 表示是否循环播放。[ default: true ]
      playInterval: 2000, // 表示播放的速度（跳动的间隔），单位毫秒（ms）。[ default: 2000 ]
      realtime: true, // 拖动圆点的时候，是否实时更新视图。[ default: true ]
      controlPosition: 'left', // 表示『播放』按钮的位置。可选值：'left'、'right'。[ default: 'left' ]
      zlevel: 0, // 所有图形的 zlevel 值。[ default: 0 ]
      z: 2, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低，而且不会创建新的 Canvas。
      //left: 'auto', // timeline组件离容器左侧的距离。[ default: 'auto' ], left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
      //top: 'auto', // timeline组件离容器上侧的距离。[ default: 'auto' ], top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。
      //right: 'auto', // timeline组件离容器右侧的距离。
      //bottom: 'auto', // timeline组件离容器下侧的距离。
      padding: 5, // timeline内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。如:[100,20,20,20]
      orient: 'horizontal', // 时间线 摆放方式，可选值有：'vertical'：竖直放置。'horizontal'：水平放置。
      inverse: false, // 是否反向放置 timeline，反向则首位颠倒过来。[ default: false ]
      symbol: 'emptyCircle', // timeline标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
      symbolSize: 10, // timeline标记的大小
      lineStyle: { // 轴线
        show: true, // 是否显示轴线。可以设置为 false 不显示轴线，则可以做出不同的样式效果。[ default: true ]
        color: '#fff', // timeline 线的颜色。[ default: '#304654' ]
        width: 2, // timeline 线宽。[ default: 2 ]
        type: 'solid', // timeline 线的类型。'solid','dashed','dotted'
        opacity: 1 // 图形透明度
      },
      label: { // 轴的文本标签
        normal: {
          show: true, // 是否显示 label。[ default: true ]
          position: 'bottom', // 'auto'： 完全自动决定。'left'： 贴左边界放置。 当 timline.orient 为 'vertical' 时有效。'right'：当 timline.orient 为 'vertical' 时有效。 贴右边界放置。
          // 'top'： 贴上边界放置。 当 timline.orient 为 'horizontal' 时有效。'bottom'： 贴下边界放置。 当 timline.orient 为 'horizontal' 时有效。
          // number： 指定某个数值时，表示 label 和轴的距离。为 0 时则和坐标轴重合，可以为正负值，决定 label 在坐标轴的哪一边。
          color: '#fff', // timeline.lable文字的颜色。[ default: '#304654' ]
          fontSize: 12, // timeline.lable文字的字体大小
          interval: 'auto', // label 的间隔。当指定为数值时，例如指定为 2，则每隔两个显示一个 label。[ default: 'auto' ]
          rotate: 0, // label 的旋转角度。正值表示逆时针旋转。[ default: 0 ]
          backgroundColor: 'transparent', // 文字块背景色。[ default: 'transparent' ]默认透明
          formatter: '{value}年份', // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。[ default: null ]
        },
      },
      checkpointStyle: { // 『当前项』（checkpoint）的图形样式。
        symbol: 'circle', // timeline.checkpointStyle 标记的图形。
        symbolSize: 13, // timeline.checkpointStyle 标记的大小
        color: '#FFF68F', // timeline组件中『当前项』（checkpoint）的颜色。[ default: '#c23531' ]
        borderWidth: 2, // timeline组件中『当前项』（checkpoint）的边框宽度。
        borderColor: '#FFF68F', // timeline组件中『当前项』（checkpoint）的边框颜色。[ default: 'rgba(194,53,49, 0.5)' ]
        animation: true, // timeline组件中『当前项』（checkpoint）在 timeline 播放切换中的移动，是否有动画。[ default: true ]
        animationDuration: 500, // timeline组件中『当前项』（checkpoint）的动画时长。[ default: 300 ]
        animationEasing: 'backln' // timeline组件中『当前项』（checkpoint）的动画的缓动效果。不同的缓动效果可以参考 缓动示例。
      },
      controlStyle: { // 『控制按钮』的样式。『控制按钮』包括：『播放按钮』、『前进按钮』、『后退按钮』。
        show: true, // 是否显示『控制按钮』。设置为 false 则全不显示。[ default: true ]
        showPlayBtn: true, // 是否显示『播放按钮』。[ default: true ]
        showNextBtn: true, // 是否显示『前进按钮』。[ default: true ]
        showPrevBtn: true, // 是否显示『后退按钮』。[ default: true ]
        color: '#fff', // 按钮颜色。[ default: '#304654' ]
        borderColor: '#fff', // 按钮边框颜色。[ default: '#304654' ]
        borderWidth: 1, // 按钮边框线宽。
        itemSize: 15, // 『控制按钮』的尺寸，单位为像素（px）。[ default: 22 ]
        itemGap: 12, // 『控制按钮』的间隔，单位为像素（px）。[ default: 12 ]
        position: 'left' // 『控制按钮』的位置。[ default: 'left' ], 当 timeline.orient 为 'horizontal'时，'left'、'right'有效。当 timeline.orient 为 'horizontal'时，'left'、'right'有效。
      },
      /*emphasis: { // 高亮样式 (包括 label,itemStyle,checkpoint,controlStyle)
      label: {
      },
      itemStyle: {
      },
      checkpoint: {
      },
      controlStyle: {
      }
      },*/
      // timeline 数据。Array 的每一项，可以是直接的数值。 如果需要对每个数据项单独进行样式定义，则数据项写成 Object。Object中，value属性为数值。
      data: [], // timeline.data 中的每一项，对应于 options 数组中的每个 option。
    },
    backgroundColor: '#000', // 背景色
    title: {
      text: '男女平均月收入对比', // 标题文本
      top: '3%',
      left: '2%', // 标题距左侧距离

    },
    legend: { // 图例
      top: '5%', // 图例距离顶部距离
      left: 'center', // 图例距离左侧距离(此处水平居中)
      data: ['男士', '女士'] // 图例的数据数组,一般对应系列名称,即 series.name
    },
    tooltip: { // 提示框
      show: true,
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器配置项。
        type: 'shadow', // 'line' 直线指示器;'shadow' 阴影指示器.
      },
      formatter: '{b}<br/>{a}: {c}元' // 提示框所提示的文本内容
    },
    // 网格grid区域
    grid: [{
      show: false, // 男士grid区域
      left: '4%',
      top: '15%',
      bottom: '20%',
      containLabel: true, // grid 区域是否包含坐标轴的刻度标签。
      width: '42%', // grid 组件的宽度。默认自适应。
    }, {
      show: false, // 中间区域(本区,本市,省内,省外)
      left: '51.7%',
      top: '20%',
      bottom: '20%',
      //width: '10%',
      tooltip: {
        show: false // 中间部分的提示框不显示也没必要显示
      }
    }, {
      show: false, // 女士grid区域
      right: '4%',
      top: '15%',
      bottom: '20%',
      containLabel: true, // grid 区域是否包含坐标轴的刻度标签。
      width: '42%', // grid 组件的宽度。默认自适应。
    },],
    // X轴线配置
    xAxis: [{ // 左侧区域
      gridIndex: 0, // x 轴所在的 grid 的索引，默认位于第一个 grid。[ default: 0 ]
      type: 'value', // 轴线类型: 数值轴
      position: 'top', // 轴线位置(此处位于顶部)
      inverse: true, // 是否是反向坐标轴.[ default: false ]
      axisLine: {
        show: false, // 轴线不显示
      },
      axisTick: {
        show: false, // 轴线刻度不显示
      },
      axisLabel: { // 轴线刻度标签
        show: true, // 显示刻度标签

      },
      splitLine: { // 垂直于X轴的分隔线
        show: true, // 显示分隔线
        lineStyle: { // 分隔线样式
          color: '#fff',
          width: 1,
          type: 'solid',
        },
      },
      // 强制设置坐标轴分割间隔
      interval: 2000,
      min: 0, // 最小值
      max: 8000 // 最大值
    },
    { // 中间区域
      gridIndex: 1,
      show: false, // 中间部分不显示X轴
    },
    { // 右侧区域
      gridIndex: 2,
      type: 'value',
      position: 'top',
      inverse: false, // 是否是反向坐标轴.[ default: false ]
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,

      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#fff',
          width: 1,
          type: 'solid',
        },
      },
      // 强制设置坐标轴分割间隔
      interval: 2000,
      min: 0, // 最小值
      max: 8000 // 最大值
    },],
    // Y轴线配置
    yAxis: [{ // 左侧区域
      gridIndex: 0, // y 轴所在的 grid 的索引，默认位于第一个 grid。[ default: 0 ]
      type: 'category', // 轴线类型: 类目轴
      // 类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
      boundaryGap: true, // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
      inverse: true, // 是否是反向坐标轴.[ default: false ]
      position: 'right', // y轴的位置。'left' or 'right'
      axisLine: {
        show: false // y轴线不显示
      },
      axisTick: {
        show: true, // y轴线刻度不显示
        lineStyle: { // 刻度线样式
          color: '#fff'
        }
      },
      axisLabel: {
        show: false, // 刻度标签不显示
      },
      data: myData // Y轴(这里是类目轴)的类目数据
    },
    {
      gridIndex: 1, // 中间区域
      type: 'category',
      boundaryGap: true,
      inverse: true,
      position: 'left', // y轴的位置。'left' or 'right'
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true, // 显示中间部分的Y轴刻度标签

      },
      data: myData
    },
    { // 右侧区域
      gridIndex: 2,
      type: 'category',
      boundaryGap: true,
      inverse: true,
      position: 'left',
      axisLine: {
        show: false
      },
      axisTick: {
        show: true,
        lineStyle: { // 刻度线样式
          color: '#fff'
        }
      },
      axisLabel: {
        show: false,
      },
      data: myData
    }],
    series: []
  },
  /* baseOption 结束 */
  options: []
});
/* option 结束 */
/* 逐个为配置项中的 data 和 series 赋值 */
for (var i = 0; i < years.length; i++) {
  // 给时间线的 data 赋值
  option.baseOption.timeline.data.push(years[i]);
  // 根据年份的不同 给左侧,中间,右侧(男士,中间部分,女士)的三个不同系列配置系列列表 series[{},{},{}]
  // 此处中间部分的系列不必设置
  option.options.push({
    series: [
      {
        name: '男士', // 系列名称
        type: 'bar',
        barGap: 5, // 柱间距离
        barWidth: 10, // 男士柱子宽度
        xAxisIndex: 0, // 对应在X轴的grid索引
        yAxisIndex: 0, // 对应在Y轴的grid索引
        label: {
          normal: {
            show: true,
            position: 'left',
            textStyle: { // 柱子上数字样式
              color: '#fff',
              fontSize: 10,
            },
          },
          emphasis: {
            show: true,
            position: 'left',
            textStyle: { // 柱子上数字样式
              color: '#fff',
              fontSize: 10,
            },
          },
        },
        itemStyle: { // 柱条样式。
          normal: {
            color: '#3300ff', // 普通状态下柱条颜色
          },
          emphasis: {
            color: '#00ffff', // 普通状态下柱条颜色
          },
        },
        data: dataMan[years[i]], // 系列中的数据内容数组
      },
      {
        name: '女士', // 系列名称
        type: 'bar',
        barGap: 5, // 柱间距离
        barWidth: 10, // 女士柱子宽度
        xAxisIndex: 2, // 对应在X轴的grid索引
        yAxisIndex: 2, // 对应在Y轴的grid索引
        label: {
          normal: {
            show: true,
            position: 'right',
            textStyle: { // 柱子上数字样式
              color: '#fff',
              fontSize: 10,
            },
          },
          emphasis: {
            show: true,
            position: 'right',
            textStyle: { // 柱子上数字样式
              color: '#fff',
              fontSize: 10,
            },
          },
        },
        itemStyle: { // 柱条样式。
          normal: {
            color: '#FF0000', // 普通状态下柱条颜色
          },
          emphasis: {
            color: '#fe89ff', // 高亮状态下柱条颜色
          },
        },
        data: dataWomen[years[i]], // 系列中的数据内容数组
      }
    ]
  });
}
</script>

<style lang="less" scoped></style>
